<template>
  <view class="studentListMain">
    <view class="header">
       <text>学员名单</text>
       <text>共 {{studentList.length}} 人</text>
    </view>
    <view class="body">
      <view class="itemBox" v-for="(item, index) in studentList" :key="index">
        <view class="one">
          <text class="h3">{{item.name}}</text>
          <text class="span">{{item.sex}}</text>
          <text class="span">{{item.age}}</text>
        </view>
        <view class="two">
          <text class="p">工作单位：{{item.unit}}</text>
        </view>
        <u-icon class="phoneIcon" name="phone-fill" color="#4683d4" size="50"></u-icon>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'StudentList',
  data() {
    return {
      studentList: [{
        name: '张三',
        sex: '男',
        age: 18,
        unit: 'ABC有限公司'
      }, {
        name: '李四',
        sex: '女',
        age: 18,
        unit: 'ABC有限公司'
      }, {
        name: '王五',
        sex: '男',
        age: 18,
        unit: 'ABC有限公司'
      }, {
        name: '赵六',
        sex:'女',
        age: 18,
        unit: 'ABC有限公司'
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
.studentListMain{
 .header{
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-top: 1rpx solid #8dbcfd;
   background: #4683d4;
   height: 100rpx;
   padding: 0 40rpx;
   > text{
     display: block;
     &:nth-of-type(1) {
       font-size: 36rpx;
       color: #fff;
     }
     &:nth-of-type(2) {
       font-size: 28rpx;
       color: #fff;
     }
   }
 }
  .body{
    padding: 20rpx;
    .itemBox{
      padding: 20rpx 150rpx 20rpx 20rpx;
      background: #fff;
      border-bottom: 1rpx solid #f1f1f1;
      position: relative;
      .phoneIcon{
        position: absolute;
        right: 50rpx;
        top: 50%;
        margin-top: -25rpx;
      }
      .one{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .h3{
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }
        .span{
          font-size: 28rpx;
          color: #333;
        }
      }
      .two{
        .p{
          font-size: 28rpx;
          color: #666;
        }
      }
    }
  }
}
</style>
